<template>
  <view class="wrap">
    <view class="content">
      <view class="tabActiveTwo tabActiveThree">
        <view class="binding">
          <text>绑定设备，同步健康数据</text>
          <view class="bind-btn" @tap="toBind">去绑定</view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">日常监测</text>
            </view>
          </view>
          <view :class="['informationWrap', 'cf', state.isExpand ? '' : 'restrict']">
            <indexCard :message="state.healthList"></indexCard>
          </view>
        </view>
        <view class="card">
          <view class="interpretation">
            <view class="left">
              <text class="border" />
              <text class="name">深度监测</text>
            </view>
          </view>
          <view class="informationWrap cf">
            <indexCard :message="state.healthListNew"></indexCard>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { drugInfoGet, healthInfoAll } from '@/api/hmm'
import { getSportRecord } from './healthPortrait.api'
import { weight_info_question, weight_save } from '@/module/api/questionaire'
import { parseTime, throttle } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import indexCard from './components/indexCard'
import store from '@/store'
const state = reactive({
  show: false,
  isExpand: false,
  healthList: {},
  userInfo: {},
  loginInfo: {},
  healthListNew: {}
})
const dietQuestionInfo = reactive({
  height: 0,
  weight: 0,
  ifNeedWeightLose: '',
  laborIntensity: ''
})
onShow(() => {
  state.loginInfo = JSON.parse(uni.getStorageSync('userInfo'))
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  healthInfoAllFun()
})

const toBind = () => {
  uni.navigateTo({
    url: '/module/src/pages/myEquipment/index'
  })
}
const healthInfoAllFun = () => {
  const param = state.userInfo.empi
  healthInfoAll(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      let healthListWrap = res.data
      dietQuestionInfo.height = res.data.height.itemValue
      dietQuestionInfo.weight = res.data.weight.itemValue
      let resultData = Object.entries(healthListWrap).map(([name, info]) => ({
        ...info,
        type: name
      }))
      let resultDataFilter = []
      let resultDataFilterTwo = []
      for (let i = 0; i < resultData.length; i++) {
        let obj = resultData[i]
        if (resultData[i].type == 'bmi') {
          obj.collectTime =
            healthListWrap.weight && healthListWrap.weight.collectTime
              ? timeFilter(healthListWrap.weight.collectTime)
              : ''
          obj.itemValue =
            healthListWrap.weight && healthListWrap.weight.itemValue
              ? healthListWrap.weight.itemValue
              : ''
          obj.name = '体重'
          obj.healthInfo = 'BMI'
          obj.classStyle = 'icon-tizhong1'
          obj.colorStyle = '#ffd666'
          obj.unit = 'kg'
          obj.sort = 1
          // resultDataFilter.unshift(obj)
          resultDataFilter.push(obj)
        } else if (resultData[i].type == 'whr') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.name = '腰臀比'
          obj.healthInfo = 'whr'
          obj.classStyle = 'icon-yaotunbi1'
          obj.colorStyle = '#857bff'
          obj.unit = ''
          obj.sort = 2
          resultDataFilter.push(obj)
        } else if (resultData[i].type == 'sleep') {
          obj.collectTime = resultData[i].collectTime
            ? parseTime(resultData[i].collectTime, '{m}-{d}')
            : ''
          obj.itemValue = resultData[i].itemValue ? getSleepTimes(resultData[i].itemValue) : ''
          obj.name = '睡眠'
          obj.healthInfo = 'sleep'
          obj.classStyle = 'icon-shuimian'
          obj.colorStyle = '#41a4ff'
          obj.unit = ''
          obj.sort = 9
          resultDataFilter.push(obj)
        } else if (resultData[i].type == 'water') {
          obj.collectTime = resultData[i].collectTime
            ? parseTime(resultData[i].collectTime, '{m}-{d}')
            : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.name = '饮水'
          obj.healthInfo = 'water'
          obj.classStyle = 'icon-yinshui'
          obj.colorStyle = '#4bddbe'
          obj.unit = 'ml'
          obj.sort = 10

          resultDataFilter.push(obj)
        } else if (resultData[i].type == 'defecate') {
          obj.collectTime = resultData[i].collectTime
            ? parseTime(resultData[i].collectTime, '{m}-{d}')
            : ''
          obj.name = '排便'
          obj.healthInfo = 'defecate'
          obj.classStyle = 'icon-Subtract'
          obj.colorStyle = '#FF813C'
          obj.unit = '分'
          obj.sort = 11
          resultDataFilter.push(obj)
        }
        if (resultData[i].type == 'sbp') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.itemValueDbp = healthListWrap.dbp.itemValue ? healthListWrap.dbp.itemValue : ''
          obj.normalFlagDbp = healthListWrap.dbp.normalFlag ? healthListWrap.dbp.normalFlag : ''
          // obj.normalFlagDbp = healthListWrap.dbp.normalFlag ? healthListWrap.dbp.normalFlag : ''
          obj.name = '血压'
          obj.healthInfo = 'blood_pressure'
          obj.classStyle = 'icon-xieya1'
          obj.colorStyle = '#ffa654'
          obj.unit = 'mmHg'
          obj.sort = 3
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'heartRate') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.name = '心率'
          obj.healthInfo = 'heart_rate'
          obj.classStyle = 'icon-xinshuai1'
          obj.colorStyle = '#5383fe'
          obj.unit = '次/分'
          obj.sort = 4
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'blood_sugar') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorValue
            : ''
          obj.stateEat = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorName
            : ''
          obj.normalFlag = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorStatus
            : ''
          obj.name = '血糖'
          obj.healthInfo = 'blood_sugar'
          obj.classStyle = 'icon-xietang1'
          obj.colorStyle = '#ff746b'
          obj.unit = 'mmol/L'
          obj.sort = 5
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'spo2') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].itemValue ? resultData[i].itemValue : ''
          obj.name = '血氧'
          obj.healthInfo = 'blood_oxygen'
          obj.classStyle = 'icon-xieyang1'
          obj.colorStyle = '#41a4ff'
          obj.unit = '%'
          obj.sort = 6
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'blood_ketone') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorValue
            : ''
          obj.normalFlag = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorStatus
            : ''
          obj.name = '血酮'
          obj.healthInfo = 'blood_ketone'
          obj.classStyle = 'icon-xietong'
          obj.colorStyle = '#857bff'
          obj.unit = 'mmol/L'
          obj.sort = 7
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'uric_acid') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.itemValue = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorValue
            : ''
          obj.normalFlag = resultData[i].indicatorList
            ? resultData[i].indicatorList[0].indicatorStatus
            : ''
          obj.name = '尿酸'
          obj.healthInfo = 'uric_acid'
          obj.classStyle = 'icon-niaosuan'
          obj.colorStyle = '#ff824d'
          obj.unit = 'umol/L'
          obj.sort = 8
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'blood_fat') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.name = '血脂'
          obj.healthInfo = 'blood_fat'
          obj.classStyle = 'icon-xiezhi'
          obj.colorStyle = '#28dfdf'
          obj.unit = 'mmol/L'
          obj.sort = 11
          if (resultData[i].indicatorList && resultData[i].indicatorList.length > 0) {
            console.log(1)
          } else {
            let blood_fat_obj = [
              {
                color: '',
                empi: '',
                indicatorKey: 'total_cholesterol',
                indicatorName: '总胆固醇',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'blood_fat',
                reference: null,
                reportId: '',
                tag: '总胆固醇',
                tagKey: null
              },
              {
                color: '',
                empi: '',
                indicatorKey: 'tg',
                indicatorName: '甘油三酯',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'blood_fat',
                reference: null,
                reportId: '',
                tag: '甘油三酯',
                tagKey: null
              },
              {
                color: '',
                empi: '',
                indicatorKey: 'hdlc',
                indicatorName: '高密度脂蛋白胆固醇',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'blood_fat',
                reference: null,
                reportId: '',
                tag: '高密度脂蛋白胆固醇',
                tagKey: null
              },
              {
                color: '',
                empi: '',
                indicatorKey: 'ldlc',
                indicatorName: '低密度脂蛋白胆固醇（LDL-C）',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'blood_fat',
                reference: null,
                reportId: '',
                tag: '低密度脂蛋白胆固醇（LDL-C）',
                tagKey: null
              }
            ]
            obj.indicatorList = blood_fat_obj
          }
          resultDataFilterTwo.push(obj)
        } else if (resultData[i].type == 'liver_function') {
          obj.collectTime = resultData[i].collectTime ? timeFilter(resultData[i].collectTime) : ''
          obj.name = '肝功能'
          obj.healthInfo = 'liver_function'
          obj.classStyle = 'icon-gangongneng'
          obj.colorStyle = '#ff746b'
          obj.unit = 'U/L'
          obj.sort = 12
          if (resultData[i].indicatorList && resultData[i].indicatorList.length > 0) {
            console.log(1)
          } else {
            let blood_fat_obj = [
              {
                color: '',
                empi: '',
                indicatorKey: 'got',
                indicatorName: '谷草转氨酶',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'liver_function',
                reference: null,
                reportId: '',
                tag: '谷草转氨酶',
                tagKey: null
              },
              {
                color: '',
                empi: '',
                indicatorKey: 'gpt',
                indicatorName: '谷丙转氨酶',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'liver_function',
                reference: null,
                reportId: '',
                tag: '谷丙转氨酶',
                tagKey: null
              },
              {
                color: '',
                empi: '',
                indicatorKey: 'ygt',
                indicatorName: 'Y-谷氨酰转肽酶',
                indicatorStatus: '',
                indicatorStatusDesc: '',
                indicatorValue: '',
                parentKey: 'liver_function',
                reference: null,
                reportId: '',
                tag: 'Y-谷氨酰转肽酶',
                tagKey: null
              }
            ]
            obj.indicatorList = blood_fat_obj
          }
          resultDataFilterTwo.push(obj)
        }
      }
      resultDataFilter.sort((a, b) => a.sort - b.sort)
      state.healthList = resultDataFilter
      resultDataFilterTwo.sort((a, b) => a.sort - b.sort)
      state.healthListNew = resultDataFilterTwo
    } else {
      state.healthList = {}
      state.healthListNew = {}
    }
  })
}
// 获取睡眠时长
const getSleepTimes = (value: string) => {
  const sleepTimes = value.split('.')
  const hour = Number(sleepTimes[0])
  if (sleepTimes[1]) {
    const minute = Math.round(Number('0.' + sleepTimes[1]) * 60)
    return `${hour}小时${minute > 10 ? minute : '0' + minute}分`
  } else {
    return `${hour}小时`
  }
}
const timeFilter = (t: string) => {
  if (!t) {
    return ''
  }

  const n = new Date()
  const d = parseTime(n, '{y}-{m}-{d}')

  if (t.includes(d)) {
    return parseTime(t, '{h}:{i}')
  } else {
    return parseTime(t, '{m}-{d}')
  }
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  background: #fff;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

  .content {
    position: relative;

    .tabActiveTwo {
      background: #fff;

      &.tabActiveThree {
        padding-top: 32rpx;
        border-radius: 24rpx 24rpx 0 0;

        .card {
          &:nth-child(1) {
            margin: 0 32rpx !important;
          }
        }
      }
    }

    .binding {
      margin: 0 32rpx 32rpx;
      background: #fafafa;
      border-radius: 44rpx;
      border: 1rpx solid #e5e6eb;
      display: flex;
      align-items: center;
      height: 88rpx;
      padding: 0 24rpx;
      font-weight: 700;
      font-size: 26rpx;
      color: #222222;
      justify-content: space-between;
      .bind-btn {
        background: #ffffff;
        border-radius: 28rpx;
        font-size: 24rpx;
        padding: 0 24rpx;
        height: 56rpx;
        line-height: 56rpx;
        border: 1rpx solid #e5e6eb;
      }
    }
    .card {
      margin: 32rpx 32rpx 0;
      background: #fff;

      &:nth-of-type(1) {
        margin: 32rpx 32rpx 0;
      }

      .interpretation {
        position: relative;
        height: 46rpx;

        .left {
          .border {
            display: inline-block;
            width: 8rpx;
            height: 32rpx;
            vertical-align: middle;
            background: #00d1b6;
            border-radius: 0 4rpx 4rpx 0;
          }

          .name {
            display: inline-block;
            margin-left: 16rpx;
            font-size: 32rpx;
            font-weight: 700;
            color: #222;
            vertical-align: middle;
          }
        }

        .right {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);

          .check-text {
            display: inline-block;
            font-size: 28rpx;
            color: #00d1b6;
            vertical-align: middle;
          }

          .img {
            display: inline-block;
            font-size: 32rpx;
            color: #00d1b6;
            vertical-align: middle;
            width: 32rpx;
            height: 32rpx;
          }

          &.record {
            padding: 4rpx 14rpx 6rpx 20rpx;
            border: 1rpx solid #00d1b6;
            border-radius: 45rpx;

            .check-text {
              font-weight: 700;
              transform: translateY(-2rpx);
            }
          }
        }
      }
      .restrict {
        // height: 428rpx;
        overflow: hidden;
      }

      .informationWrap {
        margin-top: 32rpx;
      }
    }
  }
}

.bg-box {
  position: relative;
}

.bg-box-image {
  width: 100%;
  height: 328rpx;
}
</style>
